<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 37</title>
    <style>
        div {
            font-size: 66px;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="root"></div>
</body>
<script>
    // 关于 list 操作的内容进行封住
    const listRelativeEffect = () =>{
        const {ref,reactive} = Vue;
        const list = reactive([]);
        const addItemToList = (item)=>{
            list.push(item);
        };
        return {
            list,
            addItemToList,
        }
    }

    // 关于 inputValue 操作的内容进行封住
    const inputRelativeEffect = () =>{
        const {ref,reactive} = Vue;
        const inputVue = ref('');
        const handleInputValueChange = (e)=>{
            inputVue.value = e.target.value;
        };
        return {
            inputVue,
            handleInputValueChange,
        }
    }


    const app = Vue.createApp({
        setup(props, context) {
            //流程调度中转操作
            const {list, addItemToList} = listRelativeEffect();
            const {inputVue, handleInputValueChange} = inputRelativeEffect();
            return {
                list,
                addItemToList,
                inputVue,
                handleInputValueChange,
            }
        },

        // created 实例被完全初始化之前
        template: `
          <div>
            <div>
              <input type="text" :value="inputVue" @input="handleInputValueChange"/>
              <button @click="()=>addItemToList(inputVue)">添加</button>
            </div>
            <div>{{inputVue}}</div>
            <ul>
              <li v-for="(item,index) in list" :key="index">{{item}}</li>
            </ul>
          </div>
        `
    });



    const vm = app.mount('#root');
</script>
</html>